<template>
    <div style="user-select:none; padding: 20px;">
        <vxe-grid
          resizable
          keep-source
          border
          ref="xGrid"
          show-header-overflow
          highlight-hover-row
          :export-config="{}"
          :loading="loading"
          :pager-config="tablePage"
          :form-config="formData"
          :toolbar-config="tableToolbar"
          :data="tableData"
          :columns="tableColumn"
          @form-submit="findList"
          :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
          @page-change="handlePageChange">

          <template v-slot:form>
            <vxe-form :data="formData" @submit="findList">
              <vxe-form-item title="上传时间" field="beginTime">
                <template v-slot>
                  <vxe-input type="date" v-model="formData.beginTime" placeholder="请输入开始时间" clearable></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="至" field="endTime">
                <template v-slot>
                  <vxe-input type="date" v-model="formData.endTime" placeholder="请输入结束时间" clearable></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="是否上传符件" field="sex">
                <template v-slot>
                  <vxe-select v-model="formData.fileFlag" placeholder="请选择" clearable>
                    <vxe-option value="1" label="是"></vxe-option>
                    <vxe-option value="0" label="否"></vxe-option>
                  </vxe-select>
                </template>
              </vxe-form-item>
               <vxe-form-item title="关键字" field="keywords">
                <template v-slot>
                  <vxe-input type="text" v-model="formData.keywords" placeholder="请输入开始时间" clearable></vxe-input>                  
                </template>
              </vxe-form-item>

              <vxe-form-item>
                <template v-slot>
                  <vxe-button type="submit" status="primary" @click="findList()">查询</vxe-button>
                </template>
              </vxe-form-item>
            </vxe-form>
          </template>

          <template v-slot:operate="{ row }">            
            <vxe-button icon="el-icon-delete-solid" title="删除" circle @click="removeRowEvent(row)"></vxe-button>
            <vxe-button icon="el-icon-upload" title="上传符件" circle @click="uploadFileEvent(row)"></vxe-button>        
          </template>
        </vxe-grid>

    </div>    
</template>

<script>
  import { getTable, queryData, removeRowEvent, uploadFileEvent, getFileInfo } from "@/api/db/table";
  import { getBase } from "@/api/model/base";
  import XEUtils from 'xe-utils'

  export default {
  name: "UploadDataToTable",
  data() {
      return {
        // 遮罩层
        loading: true,
        open: false,
        fileList:[],
        tablePage: {
                total: 0,
                currentPage: 1,
                pageSize: 10,
                align: 'left',
                pageSizes: [10, 20, 50, 100, 200, 500],
                layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
                perfect: true
        },
        tableData: [],   
        formData: {
                beginTime: null,
                endTime: null,
                fileFlag: null,
                keywords: ''
              },        
        tableToolbar: {
            export: true,
            custom: true
        },            
        tableInfo:{
            tableName:null,
            dbId: -1
        },
        tableId: null,
        modelId: -1,   
        tableColumn: [],  
      }
  },
  created() {
      this.generalTableId();
  },
  methods: {
      generalTableId() {
          this.tableId = this.$route.params.tableId ;
          this.modelId = this.$route.params.modelId ;
          getTable(this.tableId).then(response => {
            this.tableInfo = response.data;
        });
        const modelId = this.modelId 
        getBase(modelId).then(response => {
            const modelColumnInfoList = response.data.modelColumnInfoList;
            this.tableColumn.push({type:'seq', width:60});

            for(var i = 0; i < modelColumnInfoList.length; i++) {
                this.tableColumn.push({
                    field: modelColumnInfoList[i].columnCode, 
                    title: modelColumnInfoList[i].columnName, 
                    showOverflow: true,                   
                    }) ;                
            }
            this.tableColumn.push({ field: '_file_name',title: '符件名称', width:"10%", showOverflow: true,
              slots: {
                    // 使用渲染函数
                    default: ({ row }, h) => {
                      return [
                        h('span', {
                          style: {
                            color: 'blue'
                          },
                          on: {
                            click: () => this.fileClickEvent(row)
                          }
                        }, row._file_name)
                      ]
                    }
                }
            }),
            this.tableColumn.push({ title: '操作',  slots: { default: 'operate' }, width:"10%"})
            this.findList();
            this.loading = false ;
        });
    },
    findList () {
        this.loading = true      
        queryData({tableId: this.tableId}, this.tablePage, this.formData).then(reponse => {
            this.tableData       = reponse.data.data ;
            this.tablePage.total = reponse.data.count ;
            this.loading = false ;
        }) ;
    },    
    removeRowEvent(row) {
      removeRowEvent(this.tableId, row._rowid).then(reponse => {
          this.findList();
          this.$modal.msgSuccess("删除成功");
      });
    } ,
    uploadFileEvent(row) {
       const $grid = this.$refs.xGrid
        // 读取附件
        $grid.readFile({
          multiple: false
        }).then(params => {
          // 下面的代码将创建一个空的FormData对象:
          const formData = new FormData()
          formData.append('file', params.file)
         // 添加自定义参数，不传可删除
         formData.append('_rowId', row._rowid)
         formData.append('tableId', this.tableId)

         uploadFileEvent(formData).then(response => {
            this.findList();
            this.$message({
                message: '符件上传成功',
                type: 'success'});                            
            })
            
        })
    } ,
    handlePageChange ({currentPage, pageSize}) {
        this.tablePage.currentPage = currentPage
        this.tablePage.pageSize = pageSize
        this.findList()
    },
    fileClickEvent(row) {
      console.log(this.$download) ;
      this.$download.resource(row._file_path);     
    },
    filterMethod1 ({ value, row, column }) {
        return console.log(value + ":" + row + ":" + column)
    },
    filterMethod ({ option, row }) {
        return row[option.label].match(option.data)
    },
    changeFilterEvent (evnt, option, $panel) {
      $panel.changeOption(evnt, !!option.data, option)
    }

  },

}

</script>

<style>
  .upload-demo1 {
    margin: 0 auto;
  }

</style>